<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/mui.min.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery.min.js"></script>
    </head>
    <body class="smrz-bj">
      <div class="yhq-mains">
        <ul class="yhq-nav">
          <li class="active">
            <span class="span1">未使用</span>
          </li>
          <li>
            <span class="span1">已使用</span>
          </li>
          <li>
            <span class="span1">已过期</span>
          </li>                     
        </ul>
        <!-- 未使用 -->
        <ul class="yhq-list">
          <li>
            <div class="llist-left">
              <p class="p1">¥10</p>
              <p class="p2">订单满99可用</p>
            </div>
            <div class="list-right">
              <p class="rig-p">全场通用</p>
              <div class="rig-div">
                <div class="rig-ps">过期时间：2018-08-08</div>
                <div class="rig-an">使用</div>
              </div>
            </div>
          </li>
        </ul>
        <!-- 已过期 -->
        <ul class="yhq-list yhq-list2" style="display: none;">
          <li>
            <div class="llist-left">
              <p class="p1">¥10</p>
              <p class="p2">订单满99可用</p>
            </div>
            <div class="list-right">
              <p class="rig-p">全场通用</p>
              <div class="rig-div">
                <div class="rig-ps">过期时间：2018-08-08</div>
                <div class="rig-an2">已使用</div>
              </div>
            </div>
          </li>
        </ul>  
        <!-- 已使用 -->
        <ul class="yhq-list yhq-list2"  style="display: none;">
          <li>
            <div class="llist-left">
              <p class="p1">¥10</p>
              <p class="p2">订单满99可用</p>
            </div>
            <div class="list-right">
              <p class="rig-p">全场通用</p>
              <div class="rig-div">
                <div class="rig-ps">过期时间：2018-08-08</div>
                <div class="rig-an2">已过期</div>
              </div>
            </div>
          </li>
        </ul>               
      </div>
    </body>
</html>
 <script type="text/javascript">
  $(".yhq-nav li").bind('click',function(){
    $(this).addClass("active").siblings().removeClass("active");
    $('.yhq-list').eq($(this).index()).show().siblings(".yhq-list").hide(); 
  });
  </script>